import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/pie/lit-pie-rose.ts"
import {PieRoseProps} from "../../../echarts/pie/lit-pie-rose.ts";

const meta: Meta<PieRoseProps> = {
    title: 'Echarts/LitPieRose',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PieRoseProps): TemplateResult => {
        return html`
            <lit-pie-rose
                    .chartId=${args.chartId}
                    .width=${args.width}
                    .height=${args.height}
                    .title=${args.title}
                    .tooltip=${args.tooltip}
                    .legend=${args.legend}
                    .seriesName=${args.seriesName}
                    .seriesRadius=${args.seriesRadius}
                    .seriesCenter=${args.seriesCenter}
                    .seriesRoseType=${args.seriesRoseType}
                    .seriesShowLabel=${args.seriesShowLabel}
                    .seriesData=${args.seriesData}
            />`;
    },
    argTypes: {
        chartId: {control: 'text'},
        width: {control: 'text'},
        height: {control: 'text'},
        title: {control: 'object'},
        tooltip: {control: 'object'},
        legend: {control: 'object'},
        seriesName: {control: 'object'},
        seriesRadius: {control: 'object'},
        seriesCenter: {control: 'object'},
        seriesRoseType: {control: 'object'},
        seriesShowLabel: {control: 'object'},
        seriesData: {control: 'object'},
    },
}

export default meta;
type Story = StoryObj<PieRoseProps>;

export const Default: Story = {
    args: {
        chartId: 'pie-rose-chart',
        width: '1200px',
        height: '600px',
        title: {
            text: 'Nightingale Chart',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: [
                'rose1',
                'rose2',
                'rose3',
                'rose4',
                'rose5',
                'rose6',
                'rose7',
                'rose8'
            ]
        },
        seriesName: ['Radius Mode', 'Area Mode'],
        seriesRadius: [[20, 140], [20, 140]],
        seriesCenter: [['25%', '50%'], ['75%', '50%']],
        seriesRoseType: ['radius', 'area'],
        seriesShowLabel: [false, true],
        seriesData: [
            [
                { value: 40, name: 'rose 1' },
                { value: 33, name: 'rose 2' },
                { value: 28, name: 'rose 3' },
                { value: 22, name: 'rose 4' },
                { value: 20, name: 'rose 5' },
                { value: 15, name: 'rose 6' },
                { value: 12, name: 'rose 7' },
                { value: 10, name: 'rose 8' }
            ],
            [
                { value: 30, name: 'rose 1' },
                { value: 28, name: 'rose 2' },
                { value: 26, name: 'rose 3' },
                { value: 24, name: 'rose 4' },
                { value: 22, name: 'rose 5' },
                { value: 20, name: 'rose 6' },
                { value: 18, name: 'rose 7' },
                { value: 16, name: 'rose 8' }
            ]
        ]
    }
}

export const Simple: Story = {
    args: {
        chartId: 'pie-rose-chart-simple',
        width: '1200px',
        height: '600px',
        legend: {
            top: 'bottom',
        },
        seriesName: ['Nightingale Chart'],
        seriesRadius: [[50, 250]],
        seriesCenter: [['50%', '50%']],
        seriesRoseType: ['area'],
        seriesShowLabel: [true],
        seriesData: [
            [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
            ]
        ]
    }
}